<template>  
  <div style="width: 100%;background-color: #eee;font-size: 14px;padding: 20px 0;">
    <div><Header></Header></div>
    <div style="display: flex;width: 70%;margin: 0 auto;background-color: #FFFFFF;border-radius: 5px;">
      <div>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>后台管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="studentManager">学生管理</el-menu-item>
                <el-menu-item index="1-2" @click="TeacherManager">教师管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </div>
      <div style="flex: 1;border-right: 1px solid #cccccc;">
        <div style="height: 170px;display: flex;margin: 10px 20px;border-bottom: 1px solid #cccccc;" class="item">
          <div style="margin: 20px 0;width: 200px;">
            <el-image src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
              style="height: 130px;width: 200px;object-fit: cover;cursor: pointer;"></el-image>
          </div>
          <div style="margin: 30px 20px;">
            <div style="font-size: 18px;color: #000000;cursor: pointer;">黑马程序员欢迎您！ </div>
            <div style="display: flex;color: #cccccc;line-height: 40px;">
              <span class="icon-active"><i class="el-icon-alarm-clock el-icon--right"></i>2020.8</span>
              <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                  class="el-icon-view el-icon--right"></i>17690人围观</span>
              <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                  class="el-icon-chat-round el-icon--right"></i>47次吐槽</span>
            </div>
            <div style="overflow: hidden;text-overflow: ellipsis;line-height: 20px;color: gray;">
              欢迎新同学，前世的五百次回眸，换来今生你我的不期而遇。 梦想清澈高远，究竟哪里才是诗和远方的田野？...
            </div>
          </div>
        </div>

        <div style="height: 170px;display: flex;margin: 10px 20px;border-bottom: 1px solid #cccccc;" class="item">
          <div style="margin: 20px 0;width: 200px;">
            <el-image src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"
              style="height: 130px;width: 200px;object-fit: cover;cursor: pointer;"></el-image>
          </div>
          <div style="margin: 30px 20px;">
            <div style="font-size: 18px;color: #000000;cursor: pointer;">SpringBoot整合MyBatis</div>
            <div style="display: flex;color: #cccccc;line-height: 40px;">
              <span class="icon-active"><i class="el-icon-alarm-clock el-icon--right"></i>2020.8</span>
              <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                  class="el-icon-view el-icon--right"></i>200000000人围观</span>
              <span class="icon-active" icon="el-icon-link" style="margin-left: 10px;"><i
                  class="el-icon-chat-round el-icon--right"></i>47次吐槽</span>
            </div>
            <div style="overflow: hidden;text-overflow: ellipsis;line-height: 20px;color: gray;">
              <span> @ConfigurationProperties用法</span>
              <span>:通过@ConfigurationProperties注解加上prefix绑定的前缀可找到对应的配置文件中的参数值进行绑定。</span>
             
            </div>
          </div>
        </div>


        <div style="margin: 30px 0;text-align: center;">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[5, 10, 20, 30, 40]" :page-size="5"
            layout="total, sizes, prev, pager, next, jumper" :total="10">
          </el-pagination>
        </div>

      </div>
      <div style="width: 365px;">
        <div style="height: 220px;margin: 30px 20px;border: 1px solid #cccccc;border-radius: 5PX;">

          <div style="text-align: center;color: #626262;">
            <div style="font-size: 18px;line-height: 40px;">阿伟</div>
            <div>世上事本无难易，为之则易！</div>
            <el-button type="primary" icon="el-icon-thumb" style="width: 220px;margin: 10px 0;">联系我</el-button>
          </div>
          <div style="display: flex;text-align: center;margin-top: 20px;">
            <div style="width: 33.3%;">
              <div style="line-height: 30px;font-size: 18px;">
                2020
              </div>
              <div style="font-size: 12px;">
                文章
              </div>
            </div>    
          </div>
        </div>

        <div style="height: 340px;margin: 30px 20px;border: 1px solid #cccccc;border-radius: 5PX;">
          <el-calendar v-model="value">
          </el-calendar>
        </div>

        <div style="margin: 30px 20px;">
          <div style="background-color: #EEEEEE;height: 40px;display: flex;">
            <div style="border-right: 1px solid #cfcfcf;text-align: center;height: 40px;width: 50px;line-height: 40px;">
              <i class="el-icon-menu el-icon--right"></i>
            </div>
            <div style="font-size: 16px;line-height: 40px;font-weight: 600;margin-left: 10px;">
              Tab
            </div>
          </div>
          <div style="margin: 5px 20px;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="最近更新" name="first">
                <div
                  style="padding: 5px 0;display: flex;border-bottom: 1px dashed #cccccc;overflow: hidden;text-overflow: ellipsis;">
                  <div
                    style="background-color: #707070;color: #FFFFFF;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;">
                    1</div>
                  <div style="color: #707070;line-height: 20px;font-size: 12px;margin-left: 10px;cursor: pointer;">
                    2021年6月份自我小结</div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
   
  </div>

</template>
 
<script>
import Header from "@/components/Header";
export default {
  components: {Header},
  data() {
    return {
      value: new Date(),
      currentPage: 4,
      activeName: 'second',

    };
  },
  mounted() {
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    studentManager() {
      this.$router.push("/register")
    },
    TeacherManager(){
      this.$router.push("/teacher")
    }

  }
};
</script>
 
<style src="@/style/index.css"></style> 